<template>
	<view class="view-contain">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module leftIcon="arrow-left" :title="title" />
		<view class="form-contain">
      <u-form
        labelPosition="left"
        :model="formInfo"
        labelWidth="auto"
        ref="addForm"
      >
        <u-form-item
          label="头像"
          prop="avatar"
          borderBottom
        >
          <button slot="right" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
            <u-image :src="formInfo.avatar" width="120rpx" height="120rpx" />
          </button>
        </u-form-item>
        <u-form-item
          label="昵称"
          prop="nickName"
          borderBottom
        >
          <u-input
            type="nickname"
            inputAlign="right"
            v-model="formInfo.nickName"
            border="none"
            @blur="onBlur"
          />
        </u-form-item>
        <u-form-item
          label="专业"
          prop="zhuanye"
          borderBottom
        >
          <u-input
            inputAlign="right"
            v-model="formInfo.zhuanye"
            border="none"
          />
        </u-form-item>
        <u-form-item
          label="学历"
          prop="xueli"
          borderBottom
        >
          <u-input
            inputAlign="right"
            v-model="formInfo.xueli"
            border="none"
          />
        </u-form-item>
        <u-form-item
          label="备考城市"
          prop="preparationCity"
          borderBottom
        >
          <u-input
            inputAlign="right"
            v-model="formInfo.preparationCity"
            border="none"
          />
        </u-form-item>
        <u-form-item
          label="目标分数"
          prop="targetScore"
          borderBottom
        >
          <u-input
            type="number"
            inputAlign="right"
            v-model="formInfo.targetScore"
            border="none"
          />
        </u-form-item>
        <u-form-item
          label="备考经历"
          prop="jianjie"
        >
          <u-textarea
            v-model="formInfo.jianjie"
          />
        </u-form-item>
      </u-form>
    </view>
    <view class="quit" @click="toUpdate">
      <u-button type="primary" shape="circle">保存个人信息</u-button>
    </view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { getInfo, saveUserInfo } from "@/config/api.js"

export default {
	data() {
		return {
      title: '个人资料',
      nickName: null,
      formInfo: {
        avatar: null,
        nickName: null,
        zhuanye: null,
        xueli: null,
        jianjie: null,
        preparationCity: null,
        targetScore: null,
      }
		}
	},
  computed: {
		...mapState(['user'])
	},
  onLoad() {
    if (this.user) {
      this.formInfo = {
        avatar: this.user.avatar,
        nickName: this.user.nickName,
        zhuanye: this.user.zhuanye,
        xueli: this.user.xueli,
        jianjie: this.user.jianjie,
        preparationCity: this.user.preparationCity,
        targetScore: this.user.targetScore,
      }
    }
  },
	onShow() {
	},
	methods: {
    ...mapMutations(['setUser','setLoginShow', 'emptyUserInfo']),
    async toUpdate() {
      const res = await saveUserInfo({ ...this.formInfo, userId: this.user.userId, loginName: this.user.loginName })
      if (res) {
        uni.$u.toast('保存成功')
        this.getUserInfo()
        setTimeout(()=>{
          uni.navigateBack({delta: 1})
        },500)
      }else{
		this.emptyUserInfo(); 
		uni.showModal({
			title: '提示',
			content: '当前登录已无效，请重新登陆。',
			showCancel: false,
			success: function (res) {  
				if (res.confirm) {  
					uni.navigateBack({delta: 1});   
					}  
				} 
			});					
		}
    },
		async getUserInfo() {
			const res = await getInfo()
			if (res && res.user) {
				this.setUser(res.user)
			}
		},
    onBlur(e) {
      this.formInfo.nickName = e
    },
    onChooseavatar(e) {
      this.formInfo.avatar = e.detail.avatarUrl
    }
	}
}
</script>

<style lang="scss" scoped>
.view-contain {
  position: relative;
  height: 100vh;
  overflow-y: auto;

  .avatar-wrapper {
    background-color: transparent; /* 透明背景 */
    border: none; /* 去掉边框 */
    color: inherit; /* 继承父元素的字体颜色 */
    padding: 0; /* 去掉内边距 */
  }

  /deep/ .u-checkbox-group {
    flex-wrap: wrap;
  }

  .form-contain {
    background-color: #fff;
    border-radius: 32rpx;
    margin: 12rpx 24rpx;
    padding: 24rpx;

    .title {
      font-weight: bold;
      margin-bottom: 16rpx;
    }

    &.bottom-contain {
      margin-bottom: 200rpx;
    }
  }
  
  .bottom-btn-contain {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    width: calc(100vw - 48rpx);
    height: 150rpx;
    background-color: #fff;
    padding: 48rpx 24rpx 0;
  }

  .quit {
    padding: 0 24rpx;
    margin-top: 380rpx;
  }
}
</style>